import { useGameStore } from '../../store/gameStore';

export default function GameOver() {
  const game = useGameStore(state => state.game);
  const actions = useGameStore(state => state.actions);

  if (!game || !game.winner) return null;

  const winner = game.players.find(p => p.id === game.winner);

  const handleRestart = () => {
    actions.clearSavedGame();
    window.location.reload();
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-purple-600 to-blue-600">
      <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-2xl w-full text-center">
        <div className="text-6xl mb-4">🎉</div>
        <h1 className="text-4xl font-bold mb-4 text-purple-600">游戏结束！</h1>
        
        {winner && (
          <div className="mb-8">
            <div className="text-6xl mb-4">{winner.character.avatar}</div>
            <h2 className="text-3xl font-bold mb-2">{winner.name} 获胜！</h2>
            <p className="text-xl text-gray-600">{winner.character.name}</p>
            <p className="text-2xl font-bold text-green-600 mt-4">
              最终资产: ${winner.money}
            </p>
          </div>
        )}

        <div className="bg-gray-50 rounded-lg p-6 mb-6">
          <h3 className="font-bold mb-4">游戏统计</h3>
          <div className="space-y-2">
            <p>总回合数: {game.turn}</p>
            <p>参与玩家: {game.players.length}</p>
          </div>
        </div>

        <div className="space-y-3">
          <h3 className="font-bold mb-2">最终排名</h3>
          {game.players
            .sort((a, b) => b.money - a.money)
            .map((player, index) => (
              <div
                key={player.id}
                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
              >
                <div className="flex items-center gap-3">
                  <span className="text-2xl font-bold text-gray-400">#{index + 1}</span>
                  <span className="text-2xl">{player.character.avatar}</span>
                  <div className="text-left">
                    <p className="font-semibold">{player.name}</p>
                    <p className="text-sm text-gray-600">{player.character.name}</p>
                  </div>
                </div>
                <div className="text-right">
                  <p className="font-bold text-green-600">${player.money}</p>
                  <p className="text-sm text-gray-600">{player.properties.length} 地块</p>
                </div>
              </div>
            ))}
        </div>

        <button
          onClick={handleRestart}
          className="mt-8 w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-purple-700 transition-colors"
        >
          再来一局
        </button>
      </div>
    </div>
  );
}
